<template>
  <div class="main_box">
    <!-- swipe -->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="img of nav_list" :key="img">
        <img :src="img" alt height="200px" width="100%" />
      </mt-swipe-item>
    </mt-swipe>
    <!-- nav -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">Home</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-email">
            <span class="mui-badge">5</span>
          </span>
          <div class="mui-media-body">Email</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">Chat</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">location</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">Search</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">Phone</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-gear"></span>
          <div class="mui-media-body">Setting</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-info"></span>
          <div class="mui-media-body">about</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-more"></span>
          <div class="mui-media-body">more</div>
        </a>
      </li>
    </ul>
    <!-- goods_list -->
    <div class="goods_list">
      <img src="https://i1.mifile.cn/a4/xmad_15621645242049_IlNrO.jpg" alt />
      <img src="https://i1.mifile.cn/a4/xmad_15620835574207_ZdlhD.jpg" alt />
      <div class="phone_list">
        <div v-for="item of phone_list" :key="item.id">
            <img :src=" 'http://127.0.0.1/homework/php/project01/'+item.img_path" alt="" >
            <p class="goods_p1">{{item.goods_p1}}</p>
            <p class="goods_p2">{{item.goods_p2}}元</p>
        </div>
      </div>
      <img src="https://i1.mifile.cn/a4/xmad_15616291664006_XWeFG.jpg" alt />
      <img src="https://i1.mifile.cn/a4/xmad_15608266614476_wdGNy.jpg" alt />
      <div class="jia_list">
          <div v-for="item of jia_list" :key="item.id">
            <img :src=" 'http://127.0.0.1/homework/php/project01/'+item.img_path" alt="" >
            <p class="goods_p1">{{item.goods_p1}}</p>
            <p class="goods_p2">{{item.goods_p2}}元</p>
        </div>
      </div>
    </div>
    <div class="footer">
        <img src="//127.0.0.1//homework/php/project01/img/logo.JPG" alt="">
        <p>小米</p>
        <p>探索黑科技，小米为发烧而生</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav_list: [],
      phone_list:[],
      jia_list:[]
    };
  },
    created() {
        this.axios
        .get("http://127.0.0.1/homework/php/project01/home.php")
        .then(res => {
            for (let item of res.data) {
            this.nav_list.push(
                "http://127.0.0.1/homework/php/project01/" + item.img_path
            );
            }
        }),
        this.axios.get("http://127.0.0.1/homework/php/project01/home01.php")
       .then(res => {
            res.data.forEach(e=>{
                if(e.goods_p3.indexOf("手机")!=-1){
                    this.phone_list.push(e);
                }else{
                    this.jia_list.push(e)
                }
                console.log('http://127.0.0.1/homework/php/project01/' +e.img_path);
           
            })
            // console.log(this.phone_list);
            // console.log(this.jia_list);

        })
    }
};
</script>
<style scoped>
.footer{
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: 38px;
}
.footer>p{
    color: aqua
}
.footer>p:nth-child(3){
    color: rgb(255, 38, 0);
    font-family:"楷体";
    font-size: 20px;
}
.main_box {
  background-color: rgba(189, 43, 43, 0.747);
  height: 100%;
  width: 100%;
  padding-bottom: 80px;
}
.phone_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}
.phone_list>div{
    display: inline-block;
    background-color: #fff;
    margin-top: 10px;
    width: 140px;
    text-align: center;
    box-shadow: 2px 2px 4px rgb(184,184,184);
}
.phone_list>div>img{
    width: 48px;
    height: 48px;
}
.phone_list>div>.goods_p1{
    font-size: 14px;
    color: rgba(12, 39, 161, 0.644)
}
.phone_list>div>.goods_p2{
    font-size: 12px;
    color: rgba(189, 22, 189, 0.644)
}
.jia_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

}
.jia_list>div{
    display: inline-block;
    background-color: #fff;
    margin-top: 10px;
    width: 140px;
    text-align: center;
    box-shadow: 2px 2px 4px rgb(184,184,184);
}
.jia_list>div>img{
    width: 48px;
    height: 48px;
}
.jia_list>div>.goods_p1{
    font-size: 14px;
    color: rgba(12, 39, 161, 0.644)
}
.jia_list>div>.goods_p2{
    font-size: 12px;
    color: rgba(189, 22, 189, 0.644)
}
.mint-swipe {
  height: 200px;
  background-color: #fff;
}

.mt-swipe-item {
  width: 100%;
  height: 200px;
}
.mui-grid-view.mui-grid-9 {
  font-family: "楷体";
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  font-size: 12px;
}
.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
  font-size: 1.2em;
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(1),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(1) a div {
  color: rgba(255, 192, 203, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(2),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(2) a div {
  color: rgba(17, 161, 12, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(3),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(3) a div {
  color: rgba(228, 24, 58, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(4),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(4) a div {
  color: rgba(100, 7, 22, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(5),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(5) a div {
  color: rgba(10, 187, 187, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(6),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(6) a div {
  color: rgba(186, 224, 15, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(7),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(7) a div {
  color: rgba(4, 5, 63, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(8),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(8) a div {
  color: rgba(12, 97, 224, 0.644);
}
.mui-grid-view.mui-grid-9 .mui-media:nth-child(9),
.mui-grid-view.mui-grid-9 .mui-media:nth-child(9) a div {
  color: rgba(219, 18, 159, 0.644);
}
.goods_list > img {
  width: 100%;
  height: 250px;
}

</style>
